<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    
    .md-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 50%;
        max-width: 630px;
        min-width: 320px;
        height: auto;
        z-index: 2000;
        visibility: hidden;  /*这个是关键，visibility: hidden不会挡住其底下的元素，而opacity:0则会挡住其底下的元素*/
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }
    .md-show.md-effect-1 .md-content {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    .md-effect-1 .md-content {
        -webkit-transform: scale(0.7);
        -moz-transform: scale(0.7);
        -ms-transform: scale(0.7);
        transform: scale(0.7);
        opacity: 0;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }
    .md-content {
        color: #fff;
        background: #e74c3c;
        position: relative;
        border-radius: 3px;
        margin: 0 auto;
    }
    .md-content h3 {
        margin: 0;
        padding: 0.4em;
        text-align: center;
        font-size: 2.4em;
        font-weight: 300;
        opacity: 0.8;
        background: rgba(0,0,0,0.1);
        border-radius: 3px 3px 0 0;
    }
    .md-content > div {
        padding: 15px 40px 30px;
        margin: 0;
        font-weight: 300;
        font-size: 1.15em;
    }
    .md-content > div p {
        margin: 0;
        padding: 10px 0;
    }
    .md-content > div ul {
        margin: 0;
        padding: 0 0 30px 20px;
    }
    .md-content > div ul li {
        padding: 5px 0;
    }
    .md-content button {
        display: block;
        margin: 0 auto;
        font-size: 0.8em;
    }
    button {
        border: none;
        padding: 0.6em 1.2em;
        background: #c0392b;
        color: #fff;
        font-family: 'Lato', Calibri, Arial, sans-serif;
        font-size: 1em;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
        display: inline-block;
        margin: 3px 2px;
        border-radius: 2px;
    }
    .md-show {
        visibility: visible;
    }
        .md-overlay {
            position: fixed;
            width: 100%;
            height: 100%;
            visibility: hidden;
            top: 0;
            left: 0;
            z-index: 1000;
            opacity: 0;
            background: rgba(143,27,15,0.8);
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            transition: all 0.3s;
        }
        .md-show ~ .md-overlay {
            opacity: 1;
            visibility: visible;
        }
        .input{
            position: fixed;
            top: 50%;
            left: 45%;
        }
    </style>
</head>
<body>
    <button class="md-trigger" data-modal="modal-1">Fade in &amp; Scale</button>

    <div class="md-modal md-effect-1" id="modal-1">
        <div class="md-content">
            <h3>Modal Dialog</h3>
            <div>
                <p>This is a modal window. You can do the following things with it:</p>
                <ul>
                    <li>
                        <strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what
                        they say.</li>
                    <li>
                        <strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its
                        presence.</li>
                    <li>
                        <strong>Close:</strong> click on the button below to close the modal.</li>
                </ul>
                <button class="md-close">Close me!</button>
            </div>
        </div>
    </div>
    <input type="text" class="input"> 
    <div class="md-overlay"></div>
    <script src="jquery-1.11.3.js"></script>
    <script>
        $('.md-trigger').on('click',function(){
            $('#modal-1').addClass('md-show');
        })
        $('.md-overlay,.md-close').on('click',function(){
            $('#modal-1').removeClass('md-show');
        })
    </script>
</body>
</html>